<template>
  <div class='goodsinfo-container'>
      
      <div class="mui-card" v-for='(item,index) in shopcarlist' :key='item.id'>
				<div class="mui-card-content">
          <div class="mui-card-content-inner">
            <mt-switch v-model='$store.getters.getGoodsSelected[item.id]' @change='selectedChange(item.id,$store.getters.getGoodsSelected[item.id])'></mt-switch>
            <img :src="item.thumb_path" alt="">
            <div class='info'>
              <h1>{{item.title}}</h1>
              <div class='info-body'>
                <span class='red'>￥{{item.sell_price}}</span>
                <!-- 根据id从购物车获取对应的商量数量 -->
                <numbox :cou='$store.getters.getGoodsCount[item.id]' :goodsid='item.id'></numbox>
                
                <a href="#" @click='del(item.id,index)'>删除</a>
              </div>
             
            </div>
				  </div>
        </div>
			</div>
    <!-- 结算区域 -->
      <div class="mui-card">
				<div class="mui-card-content">
                    <div class="mui-card-content-inner price">
                        <div class='left'>
                    <p>总计（不含运费）</p>
                        <p class='body'>已勾选商品<span class='red'>&nbsp;{{$store.getters.getGoodsCountAndAmount.cou}}&nbsp;</span>件，总计<span class='red'>&nbsp;￥{{$store.getters.getGoodsCountAndAmount.amount}}</span></p>
                        </div>
                       <mt-button type='danger'>
                            去结算</mt-button>
                        
				</div>
                </div>
			</div>
 </div>
</template>

<script>
import {Toast} from 'mint-ui';
// 导入数字输入框
import goodsinfo_numbox from './shopcar_numbox.vue';

export default {
        data(){
            return {
              shopcarlist:[]
            }
        },
        created(){
            this.getshopcarlist()
        },
        methods:{
            getshopcarlist(){
                var ids=[];
                // 获取加入购物车的商品id
                this.$store.state.goodsinfo.forEach(item=>ids.push(item.id))
                ids=ids.join(',');
                console.log(this.$store.state.goodsinfo)
                if(ids.length==0) return;
            //    获取后台数据
                this.$http.get('api/goods/getshopcarlist/'+ids).then(results=>{
                    console.log(results.body);
                    if(results.body.status==0){
                        this.shopcarlist=results.body.message;
                    }else{
                        Toast('获取失败');
                    }
                })
            },
            del(id,index){
                this.shopcarlist.splice(index,1);
                // 删除store存储对象中对应的商品，必须在mutations中删除
                this.$store.commit('removeCar',id)
            },
            selectedChange(id,val){
                // console.log(selected)
                // 修改的状态同步到localStorage中去
                this.$store.commit('updateSelected',{id,selected:val})
            }
        },
        components:{
            numbox:goodsinfo_numbox
        }

    }
</script>
<style scoped lang='scss'>
    .goodsinfo-container{
        background-color:#eee;
        overflow:hidden;        
    }
    .mui-card-content-inner{
        color:#999;
        display:flex;
        align-items:center;
        .red{
            color:red;
            font-weight: bold;
            font-size:16px;
        }
        img{
            width:60px;
            // height:60px;
        }
        .info{
            h1{
                font-size:15px;
                color:#000;
                display:flex;
                flex-direction:column;
               
            }
            .info-body{
                display: flex;
                 justify-content:space-between;
            }
        }
    }
.price{
    justify-content:space-between;
    
}
</style>

